<template>
  <div id="alarm" v-if="bjShow">
    <div class="close" @click="closePane">×</div>
    <div class="title">报警历史记录</div>
    <div class="content">
      <div class="historyalarmList">
        <el-date-picker
          type="datetimerange"
          v-model="timerange"
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          value-format="timestamp"
          @change="changehisalarmtable"
          style="height: 55px; width: 610px"
        >
        </el-date-picker>
        <el-table
          :data="histableData"
          style="width: 100%; margin-top: 20px; height: 680px"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="id" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="level" label="等级" width="100">
          </el-table-column>
          <el-table-column label="时间">
            <template slot-scope="scope">
              {{ scope.row.alarmTime }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="标题"> </el-table-column>
          <el-table-column label="故障描述">
            <template slot-scope="scope">
              {{ scope.row.content }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <div
                v-if="scope.row.treatmentState == '1'"
                class="wclclick"
                @click="ztclick(scope.row)"
              >
                未处理
              </div>
              <div v-if="scope.row.treatmentState == '0'">已处理</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="tabListPage">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { bjupdate ,morebj} from "../../utils/api";

export default {
  data() {
    return {
      bjShow: false,
      timerange: [],
      // 总数据
      tableData: [],
      histableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 10,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 40],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
      param :'pageIndex=1&pageSize=10'
    };
  },
  mounted() {
    this.currentPage = 1;
    window.showhisbj = this.hisbjinit;
    this.freshList(this.param)
  },
  methods: {
    freshList(param){
      morebj(param).then((res)=>{
      this.histableData = res.data.data;
      this.totalCount = res.data.pageParam.totleInfo;
    })
    },
    hisbjinit(val) {
      this.bjShow = val.show;
      // this.tableData = val.alarmtabledata;
      // this.histableData = val.alarmtabledata;
      // this.totalCount = val.alarmtabledata.length;
    },
    // 关闭弹窗
    closePane() {
      this.bjShow = false;
      // this.histableData = [];
    },
    changehisalarmtable() {
      if(!this.timerange){
        this.freshList(this.param);
        return
      }
      var starttimestamp = this.timerange[0];
      var endtimestamp = this.timerange[1];
      var selectdata = [];
      this.histableData.forEach((element) => {
        if (
          element.alarmTime >= starttimestamp &&
          element.alarmTime <= endtimestamp
        ) {
          selectdata.push(element);
        }
      });
      this.histableData = selectdata;
      this.totalCount = selectdata.length;
    },
    // 时间戳转为普通日期格式
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
      var params = 'pageIndex='+this.currentPage+'&pageSize='+this.PageSize;
      this.freshList(params)
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
      var params = 'pageIndex='+this.currentPage+'&pageSize='+this.PageSize;
      this.freshList(params)
    },
    ztclick(item) {
      var tem = item.id+"&treatmentState=0"
      this.$confirm("是否核销该报警", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          bjupdate(tem).then((response) => {
            this.$message({
              type: "success",
              message: "核销成功!",
            });
            var params = 'pageIndex='+this.currentPage+'&pageSize='+this.PageSize;
            this.freshList(params)
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "",
          // });
        });
    },
  },
  sockets: {
    // sendAlertStatus(data) {
    //   if (data.length > 0) {
    //     this.isShow = true;
    //     let alertInfo = JSON.parse(data);
    //     this.histableData = alertInfo;
    //   } else {
    //     this.isShow = false;
    //     this.histableData = [];
    //   }
    // },
  },
};
</script>
<style scoped>
#alarm {
  margin: 0 auto;
  box-sizing: border-box;
  position: absolute;
  left: 32%;
  top: 520px;
  width: 1435px;
  height: 930px;
  color: white;
  background: url("../../../static/images/popups/detailsPane.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transition: all 1.2s;
}
/* 右上角关闭按钮 */
.close {
  float: right;
  font-size: 50px;
  font-weight: 900;
  margin-right: 30px;
  margin-top: 10px;
  transition: all 1s;
}
.close:hover {
  transform: scale(1.1);
  color: red;
  cursor: pointer;
}
.content {
  box-sizing: border-box;
  width: 100%;
  height: 800px;
  padding: 80px;
  margin-top: 30px;
}
.content .historyalarmList {
  color: white;
  width: 100%;
  /* height: calc(100% - 112px); */
}
.title {
  position: absolute;
  left: 40px;
  top: 30px;
  font-size: 32px;
  font-weight: 800;
}
.wclclick:hover {
  color: red;
  cursor: pointer;
}
.el-table /deep/ td,
.el-table /deep/ th {
  border-bottom: none !important;
}
.el-table /deep/ .el-table__body-wrapper {
  overflow-y: auto;
  height: 610px;
}
.el-table::before {
  height: 0 !important;
}
.historyalarmList /deep/ .el-range-input {
  background: transparent !important;
}
.historyalarmList /deep/ .el-input__inner {
  background: transparent !important;
  border: 1px solid #3773ff !important;
}
.historyalarmList /deep/ .el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
  font-size: 24px !important;
}
.el-pagination {
  color: white !important;
  margin-top: 10px;
}
.el-pagination /deep/ .btn-prev {
  background: transparent !important;
}
.el-pagination /deep/ .btn-next {
  background: transparent !important;
}
.el-pagination /deep/ li {
  background: transparent !important;
}
.el-pagination /deep/ .el-pagination__total {
  color: white !important;
  font-size: 20px !important;
}
.el-pagination /deep/ .el-input__inner {
  color: white !important;
}
.el-pagination /deep/ .el-pagination__jump {
  color: white !important;
  font-size: 20px !important;
}
.el-pagination /deep/ .el-input__inner {
  font-size: 20px !important;
}
.el-pagination /deep/ .el-pager li {
  font-size: 20px !important;
}
.el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #4180ca;
}

.el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}
</style>
<style>
.el-message-box {
  background-color: #00446f !important;
  border: 0px solid #ebeef5 !important;
}
.el-message-box .el-message-box__content {
  color: #e0ff00 !important;
}
.el-message-box .el-button {
  background: #183e6f !important;
  border: 0px solid #dcdfe6;
  color: #ffffff !important;
}
.el-message-box .el-button--primary {
  background-color: #adca00 !important;
}
.el-message-box .el-button--primary:hover {
  background-color: #183e6f !important;
}
.el-message-box .el-message-box__title {
  color: #ffffff !important;
}
</style>